<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Excalidraw | Hand-drawn look & feel • Collaborative • Secure</title>
  <meta name="viewport"
    content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover,shrink-to-fit=no" />
  <meta name="referrer" content="origin" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="theme-color" content="#121212" />
  <meta name="title" content="Excalidraw — Collaborative whiteboarding made easy" />
  <meta name="description"
    content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them." />
  <meta name="image" content="https://excalidraw.com/og-image-2.png" />
  <meta property="og:site_name" content="Excalidraw" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://excalidraw.com" />
  <meta property="og:title" content="Excalidraw — Collaborative whiteboarding made easy" />
  <meta property="og:image:alt" content="Excalidraw logo" />
  <meta property="og:description"
    content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them." />
  <meta property="og:image" content="https://excalidraw.com/og-image-2.png" />
  <meta property="twitter:card" content="summary_large_image" />
  <meta property="twitter:site" content="@excalidraw" />
  <meta property="twitter:url" content="https://excalidraw.com" />
  <meta property="twitter:title" content="Excalidraw — Collaborative whiteboarding made easy" />
  <meta property="twitter:description"
    content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them." />
  <meta property="twitter:image" content="https://excalidraw.com/og-twitter-v2.png" />
  <meta name="description"
    content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them." />
  <script>try {
      function setTheme(theme) {
        if (theme === "dark") {
          document.documentElement.classList.add("dark");
        } else {
          document.documentElement.classList.remove("dark");
        }
      }

      function getTheme() {
        const theme = window.localStorage.getItem("excalidraw-theme");

        if (theme && theme === "system") {
          return window.matchMedia("(prefers-color-scheme: dark)").matches
            ? "dark"
            : "light";
        } else {
          return theme || "light";
        }
      }

      setTheme(getTheme());
    } catch (e) {
      console.error("Error setting dark mode", e);
    }</script>
  <style>
    html.dark {
      background-color: #121212;
      color: #fff
    }
  </style>
  <script>// Redirect Excalidraw+ users which have auto-redirect enabled.
    //
    // Redirect only the bare root path, so link/room/library urls are not
    // redirected.
    //
    // Putting into index.html for best performance (can't redirect on server
    // due to location.hash checks).
    if (
      window.location.pathname === "/" &&
      !window.location.hash &&
      !window.location.search &&
      // if its present redirect
      document.cookie.includes("excplus-autoredirect=true")
    ) {
      window.location.href = "https://app.excalidraw.com";
    }</script>
  <link rel="apple-touch-icon" sizes="180x180" href="/tools/excalidraw/apple-touch-icon.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="/tools/excalidraw/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="/tools/excalidraw/favicon-16x16.png" />
  <meta name="version" content="{version}" />
  <link rel="preload" href="/tools/excalidraw/Virgil.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
  <link rel="preload" href="/tools/excalidraw/Cascadia.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
  <link rel="stylesheet" href="/tools/excalidraw/fonts/fonts.css" />
  <script>window.EXCALIDRAW_ASSET_PATH = "/";
    // setting this so that libraries installation reuses this window tab.
    window.name = "_excalidraw";</script>
  <style>
    body,
    html {
      margin: 0;
      -webkit-text-size-adjust: 100%;
      width: 100%;
      height: 100%;
      overflow: hidden
    }

    .visually-hidden {
      position: absolute !important;
      height: 1px;
      width: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
      white-space: nowrap;
      user-select: none
    }

    #root {
      height: 100%;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none
    }

    @media screen and (min-width:1200px) {
      #root {
        -webkit-touch-callout: default;
        -webkit-user-select: auto;
        -khtml-user-select: auto;
        -moz-user-select: auto;
        -ms-user-select: auto;
        user-select: auto
      }
    }
  </style>
  <script type="module" crossorigin src="/tools/excalidraw/assets/index-_zyynrkY.js"></script>
  <link rel="stylesheet" crossorigin href="/tools/excalidraw/assets/index-ZdaRV26N.css">
  <link rel="manifest" href="/tools/excalidraw/manifest.webmanifest">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
  <header>
    <h1 class="visually-hidden">Excalidraw</h1>
  </header>
  <div id="root"></div>
  <script>// need to load this script dynamically bcs. of iframe embed tracking
    var scriptEle = document.createElement("script");
    scriptEle.setAttribute(
      "src",
      "https://scripts.simpleanalyticscdn.com/latest.js",
    );
    scriptEle.setAttribute("type", "text/javascript");
    scriptEle.setAttribute("defer", true);
    scriptEle.setAttribute("async", true);
    // if iframe
    if (window.self !== window.top) {
      scriptEle.setAttribute("data-auto-collect", true);
    }

    document.body.appendChild(scriptEle);

    // if iframe
    if (window.self !== window.top) {
      scriptEle.addEventListener("load", () => {
        if (window.sa_pageview) {
          window.window.sa_event(action, {
            category: "iframe",
            label: "embed",
            value: window.location.pathname,
          });
        }
      });
    }</script>
</body>

</html>